<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div id="box1" class="box1">
            <p>我是个p</p>
        </div>        
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
    let vm = new Vue({
        el:"#app"
    });

    // 根据真实dom元素，产生虚拟dom。
    function createVDom(dom){
        let virtualDom = {}        
        for(let key in dom){
            dom.getAttribute(key) && (virtualDom[key] = dom.getAttribute(key));
        }
        virtualDom.tagName = dom.tagName;
        if(dom.children.length>0){
            virtualDom.children = [];
            for(let i=0;i<dom.children.length;i++){
                virtualDom.children.push(createVDom(dom.children[i]));
            }
        }else if(dom.innerHTML.trim()!=""){
            virtualDom.innerHTML = dom.innerHTML;
        }
        virtualDom.realDom = dom;
        return virtualDom;
    }

    let vDom = createVDom(document.querySelector("#app"));

    console.log("vDom",vDom);

    // 
    let virtualDom ={
        tagName:"div",
        id:"app",
        children:[
            {
                tagName:"div",
                class:"box1",
                id:"box1",
                dom:document.getElementById("box1"),
                children:[
                    {
                        tagName:"p",
                        innerHTML:"我是个p"
                    }
                ]
            },
            {
                tagName:"ul",
                children:[
                    {
                        tagName:"li",
                        innerHTML:"1"
                    },
                    {
                        tagName:"li",
                        innerHTML:"2"
                    },
                    {
                        tagName:"li",
                        innerHTML:"3"
                    }
                ]
            }
        ]
        
    } 


</script>